<template>
  <view>
    <view v-if="!globalUtils.empty(sign_pdf_flag_str) && !globalUtils.empty(sign_pdf_path)"
          :style="'--color:' + color + ';--rgbcolor:' + rgbcolor"
          class="flag2">{{ sign_pdf_flag_str }}
    </view>
    <view class="pdfview">
      <image :showMenuByLongpress="true" :src="sign_png_path" mode="widthFix" @tap="singFn"></image>
    </view>
    <view :style="'--color:' + color + ';--rgbcolor:' + rgbcolor" class="sign_btm1">
      <view v-if="globalUtils.empty(sign_pdf_path)" class="button" @tap="singFn">
        <text class="ico"></text>
        开始签名
      </view>
      <view v-else class="button" @tap="signDownFn">
        <text class="ico"></text>
        下载PDF签名文件
      </view>
    </view>
    <view v-if="div_sign_box" class="mask2 alpha0_100">
      <view :style="'--div_box_width:720rpx;--div_box_height:720rpx;--color:' + color + ';--rgbcolor:' + rgbcolor"
            class="div_box big_normal div_sign_form">
        <view class="close ico" @tap="div_sign_form_closeFn"></view>
        <view class="div_title">请手写【本人真实姓名】</view>
        <view class="canvasBox">
          <canvas :disableScroll="true" canvasId="a9a_cn___Canvas" class="canvas" @touchmove="touchmoveFn"
                  @touchstart="touchstartFn"></canvas>
          <view class="background-txt">请在此区域进行签名</view>
        </view>
        <view class="sign_btm">
          <view class="button default" @tap="signreset">
            <text class="i ico"></text>
            重写
          </view>
          <view class="button" @tap="signok">
            <text class="i ico"></text>
            确认签署
          </view>
        </view>
      </view>
    </view>
    <!-- parse <include src="../component/sorry.wxml"></include> -->
    <!--认证组件-->
    <sorry></sorry>
  </view>
</template>
<script>
import globalUtils from "../../res/www.a9a.cn";
import Sorry from "../../components/sorry/sorry.vue";

var t;
var n = require('../../res/www.a9a.cn.js');
var app = getApp();
export default {
  components: {Sorry},
  computed: {
    globalUtils() {
      return globalUtils
    }
  },
  data() {
    return {
      www_zeai_cn: null,
      div_sign_box: false,
      hasDraw: false,
      nTitle: '我的承诺书',
      color: '',
      rgbcolor: '',
      sign_png_path: '',
      sign_pdf_path: '',
      sign_pdf_flag_str: '',
      src: '',
    };
  },
  onLoad: function () {
    this.onLoadClone3389();
  },
  methods: {
    onLoadClone3389: function () {
      var that = this;
      app.globalData.get_config('_ZEAI').then(function (t) {
        that.setData({
          color: t.color,
          rgbcolor: n.c16_rgb(t.color)
        });
      });
      uni.setNavigationBarTitle({
        title: that.nTitle
      });
      app.globalData.chklogin().then(function (i) {
        if (i) {
          t = uni.getStorageSync('COOK_U');
          uni.showLoading({
            title: '玩命加载中',
            mask: true
          });
          app.globalData.ajax({
            url: 'my_sign.php',

            data: {
              submitok: 'init',
              openid: t.openid
            },

            success: function (t) {
              n.empty(t.sign_pdf_path) ||
              uni.showModal({
                content: '可在承诺书上面按住不放保存图片',
                confirmColor: that.color,
                confirmText: '朕知道了',
                showCancel: false,
                success: function (t) {
                }
              });
              if (1 == t.flag) {
                that.setData({
                  nTitle: t.nTitle,
                  sign_png_path: t.sign_png_path,
                  sign_pdf_path: t.sign_pdf_path,
                  sign_pdf_flag_str: t.sign_pdf_flag_str
                });
              } else {
                if ('noreg' == t.flag) {
                  uni.switchTab({
                    url: '/pages/my/my'
                  });
                } else {
                  (t.this = that), (t.url = 'no'), n.sorry(t);
                }
              }
              uni.hideLoading();
            }
          });
        } else {
          uni.showModal({
            content: '亲~~~请先登录完善资料再来申请哦',
            confirmColor: that.color,
            confirmText: '朕知道了',
            showCancel: false,

            success: function (t) {
              uni.switchTab({
                url: '/pages/my/my'
              });
            }
          });
        }
      });
    },

    singFn: function () {
      if (n.empty(this.sign_pdf_path)) {
        var t = uni.createCanvasContext('a9a_cn___Canvas');
        t.setStrokeStyle('#000000');
        t.setLineWidth(5);
        this.setData({
          www_zeai_cn: t
        });
        this.setData({
          div_sign_box: true
        });
      } else {
        uni.showModal({
          content: '可在承诺书上面按住不放保存图片',
          confirmColor: this.color,
          confirmText: '朕知道了',
          showCancel: false,
          success: function (t) {
          }
        });
      }
    },

    signDownFn: function () {
      n.empty(this.sign_pdf_path)
          ? this.setData({
            div_sign_box: true
          })
          : uni.downloadFile({
            url: this.sign_pdf_path,
            success: function (t) {
              if (200 === t.statusCode) {
                uni.openDocument({
                  filePath: t.tempFilePath,
                  fileType: 'pdf',
                  showMenu: true,
                  success: function (t) {
                  },
                  fail: function (t) {
                    uni.showToast({
                      icon: 'none',
                      title: '打开文件失败'
                    });
                  }
                });
              }
            }
          });
    },

    div_sign_form_closeFn: function () {
      this.setData({
        div_sign_box: false
      });
    },

    touchstartFn: function (t) {
      var n = this.www_zeai_cn;
      n.moveTo(t.touches[0].x, t.touches[0].y);
      this.setData({
        www_zeai_cn: n,
        hasDraw: true
      });
    },

    touchmoveFn: function (t) {
      var n = t.touches[0].x;
      var a = t.touches[0].y;
      var o = this.www_zeai_cn;
      o.setLineWidth(5);
      o.lineTo(n, a);
      o.stroke();
      o.setLineCap('round');
      o.draw(true);
      o.moveTo(n, a);
    },

    signreset: function () {
      this.www_zeai_cn.draw();
      this.setData({
        hasDraw: false,
        src: null
      });
    },

    signok: function () {
      var that = this;
      that.hasDraw
          ? that.www_zeai_cn.draw(
              true,
              uni.canvasToTempFilePath({
                canvasId: 'a9a_cn___Canvas',
                success: function (i) {
                  uni.showLoading({
                    title: '正成生成签名',
                    mask: true
                  });
                  uni.uploadFile({
                    url: app.globalData.WWW + '/api/wxxcx/my_sign.php',
                    filePath: i.tempFilePath,
                    name: 'pic',
                    formData: {
                      submitok: 'save',
                      openid: t.openid
                    },
                    success: function (t) {
                      t = n.jsoneval(t.data);
                      uni.hideLoading();
                      1 == t.flag
                          ? (that.setData({
                            div_sign_box: false
                          }),
                              uni.showToast({
                                title: '保存成功！',
                                icon: 'none',
                                mask: true
                              }),
                              that.onLoadClone3389({}))
                          : uni.showModal({
                            content: t.msg,
                            confirmColor: that.color,
                            confirmText: '朕知道了',
                            showCancel: false,
                            success: function (t) {
                            }
                          });
                    }
                  });
                }
              })
          )
          : uni.showToast({
            title: '请手写自己的真实姓名',
            icon: 'none',
            mask: true
          });
    },
  }
};
</script>
<style>
@import 'sign.css';
</style>
